{extend name="index/base" /}
{block name='title'}User Coupons{/block}
{block name='content'}

<div class="container clearfix my-5 pb-1">
    {include file="user/leftMenu" name="MY COUPONS" route="user/coupons"/}

    <div class="userBox">
        <div class="userH_tab clearfix">
            <a href="javascript:;" :class="{'on':listQuery.activeState=='usable'}"  @click="handleCond('usable')">Usable</a>
            <a href="javascript:;" :class="{'on':listQuery.activeState=='used'}"  @click="handleCond('used')" >Unavailable</a>

<!--            <a href="coupon.html" class="link">Get More Coupons &gt;</a>-->
        </div>
        <div class="user-coupon-content">
            <ul class="clearfix" v-if="total>0">

                <li class="coupon-info-container" v-for="(item, index) in list" :key="index">
                    <div class="coupon-element">
                        <p class="coupon-value">{{item.name}}</p>
                        <p class="coupon-desc"> {{item.coupon_intro}}</p>
                        <p class="coupon-code">
                            <span class="txts_2">Code: {{item.code}}</span>
                        </p>
                        <i class="status-icon"></i>
<!--                        &lt;!&ndash;<ul class="coupon-detail">-->
<!--                            <li class="coupon-time">{{item.expire_date}}</li>-->
<!--                            &lt;!&ndash;<li class="coupon-limit">For All Products</li>&ndash;&gt;-->
<!--                        </ul>&ndash;&gt;-->
                        <!--<a href="" class="link-coupon-use">Use</a>-->
                    </div>
                </li>



            </ul>

            <p class="no-coupon-data" v-else>
                It is empty here
            </p>
            <!-- Pagination-->
            <nav class="d-flex justify-content-center pt-2" aria-label="Page navigation">
                <el-pagination  background @current-change="handlePageChange" :page-size="listQuery.limit" @size-change="handlePageSizeChange"  layout="  prev, pager, next" :total="total"> </el-pagination>

            </nav>
        </div>
    </div>
</div>

{/block}
{block name='script'}



<script>

    layui.extend({

    }).use([], function () {
        initVue({
            data: {
                listQuery:{
                    activeState: 'usable',
                    limit: 15,
                    page:1,
                },
                list: [],
                total: 0,
                total_page: 0,
            },
            components: {
            },
            computed: {

            },
            created: function () {

            },
            mounted: function () {
                this._initData()
            },
            methods: {
                _initData:function(){
                    const that = this
                    var url = "coupon/openLists"
                    if(this.listQuery.activeState!=='usable'){
                        url = "coupon/myCoupon"
                    }
                    this.$network(url,this.listQuery).then(function(res){
                        var data = res.data || {}
                        that.total = data.total || 0
                        that.total_page = data.total_page || 0
                        that.list = data.list ||[]

                    })
                },
                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },
                handleCond: function(activeState) {
                    this.listQuery.activeState = activeState
                    this._initData()
                }

            },
        })


    })

</script>

{/block}